<template>
  <div id="home">
    <div class="top_header">
      <div class="headerBox">
        <div id="header" :class="{'el-menu--dark':theme=='dark','el-menu--light':theme=='light'}" style="position: absolute; background-color: #fff;">
          <div style="color:#47b286;padding:10px;float: left;word-break: normal;">
            <img src="../../static/img/tm-logo.png" height="35px"  align="center">
            <!--<span style="font-size:1.2rem;">受试者管理平台</span>&#45;&#45;-->
            BeMasterⅠ期自动化

          </div>


          <div style="float:left;" class="header_right">

            <el-menu :theme="theme" style="float:left;color:#47b286; background-color: #fff;" mode="horizontal" @select="handleselect"   >
              <div class="header_navv">
                <el-menu-item v-for="m in menuList" :index="m.id" class="navv_li">{{m.name}}</el-menu-item>
              </div>

              <!--<el-submenu index="P&S" id="PandS">
                <template slot="title">产品与服务</template>
                <el-menu-item v-for="m in menuList" :index="m.id">{{m.name}}</el-menu-item>
              </el-submenu>-->


            </el-menu>
          </div>

          <el-menu :theme="theme" style="float:right;color:#47b286; background-color: #fff;" mode="horizontal" @select="handleselect"   >
            <div style="float:left;color:#fff;width: 170px;text-align: center; margin-left: 20px;position: relative;padding-top: 15px">

              <i class="el-icon-search isSearch"></i>
              <el-select v-model="currentProjectId" filterable remote
                         :remote-method="loadProject" size="small" @change="selectProject" placeholder="请选择您要查询的项目" >

                <el-option
                  v-for="item in projectList"
                  :label="item.name"
                  :value="item.id" >
                </el-option>
              </el-select>
            </div>

            <el-menu-item index="DeskTop" class="homeclick">
            <!-- <img src="../../static/img/homepage.png" alt=""> -->
            </el-menu-item>
            <el-submenu index="2" class="administrators" style="float: right;margin-right: 0">

              <template slot="title" ><img class="avator" width="40px" height="40px"
                                           :src="user.avator?user.avator:'/static/img/ren.png'">{{user.name}}
              </template>
              <el-menu-item index="Profile"><i class="fa fa-user"></i>个人信息</el-menu-item>
              <el-menu-item index="pwd"><i class="fa fa-key"></i>修改密码</el-menu-item>
              <!--<el-menu-item index="theme"><i class="fa fa-key"></i>切换主题</el-menu-item>-->
              <el-menu-item index="signOut"><i class="fa fa-power-off red"></i>退出</el-menu-item>
            </el-submenu>
          </el-menu>

        </div>
      </div>
    </div>




    <!--<div class="" :span="3"  :class="{'el-menu&#45;&#45;dark':theme=='dark','el-menu&#45;&#45;light':theme=='light'}"v-show="menuSpan==3"-->
         <!--style="overflow-y:auto;overflow-x: hidden;" :style="{height:div_h+'px'}">-->
      <!--<div class="left_nav" :theme="theme" style="z-index:1; " :unique-opened="true" :router="true">-->
        <!--<div class=""  v-for="menu in leftMenuList">-->
          <!--<div class="one_title" v-if="menu.child==undefined||menu.child.length==0" :index="menu.id" :route="{'name':menu.code}">-->
            <!--<i v-bind:class="['fa',menu.icon]"></i>{{menu.name}}-->
          <!--</div>-->
          <!--<div class="two_title" v-else :index="menu.id">-->
            <!--<div slot="title" ><i v-bind:class="['fa',menu.icon]"></i>{{menu.name}}</div>-->
            <!--<div v-for="c in menu.child" :index="c.id" :route="{'name':c.code}"><i v-bind:class="['fa',c.icon]"></i>{{c.name}}</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <el-row  :style="{height:div_h+'px'}">

      <el-col :span="3"  :class="{'el-menu--dark':theme=='dark','el-menu--light':theme=='light'}"v-show="menuSpan==3"
              style="overflow-y:auto;overflow-x: hidden;" :style="{height:div_h+'px'}" class="left_nav">




        <el-menu :theme="theme" style="z-index:1; " :unique-opened="true" :router="true" class="left_dropdown">
          <template v-for="menu in leftMenuList" style=" background-color: #f6f6f6;">
            <el-menu-item v-if="menu.child==undefined||menu.child.length==0" :index="menu.id" :route="{'name':menu.code}" ><i v-bind:class="['fa ss',menu.icon]"></i>{{menu.name}}</el-menu-item>
            <el-submenu v-else :index="menu.id" class="nav_title">
              <template slot="title" ><i v-bind:class="['fa ss',menu.icon]"></i>{{menu.name}}</template>
              <el-menu-item v-for="c in menu.child" :index="c.id" :route="{'name':c.code}" class="nav_two" style="padding-left: 30px;"><i v-bind:class="['fa ss',c.icon]"></i>{{c.name}}</el-menu-item>
            </el-submenu>
            <!--
            <el-menu-item-group :title="menu.name">
              <el-menu-item v-for="c in menu.child" :index="c.url">{{c.name}}</el-menu-item>
            </el-menu-item-group>
            -->
          </template>
        </el-menu>
      </el-col>
      <el-col id="routerDiv" :span="(24-menuSpan)" style="overflow: auto;"
              :style="{height:div_h+'px'}">
          <el-tooltip :content="(menuSpan==4)?'收起':'展开'" placement="right">
            <i class="aui-iconfont menuSliderBar" :class="{'aui-icon-left':menuSpan>0,'aui-icon-right':menuSpan==0}" @click="menuSpan=(menuSpan==3)?0:3">
            </i>
          </el-tooltip>
        <!--面包屑导航 strat-->
            <el-breadcrumb separator="/" v-if="$utils.breadcrumbRouter($route.name).length>0">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="m in $utils.breadcrumbRouter($route.name)">{{m.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        <!--面包屑导航 end-->
        <router-view  style="padding: 5px 5px 40px 5px;overflow: auto;"></router-view>

      </el-col>
    </el-row>
    <footer style="text-align:center;position: fixed;bottom:0px;width:100%;z-index:1000; " class="footer_nav">

      版权所有：Copyright  2015 Yikeen. All Rights Reserved.
    </footer>
    <pwd-dialog v-bind:dialog-form-visible="dialogData.showPwd"></pwd-dialog>
    <login-dialog v-bind:login-dialog-visible="loginDialogVisible"></login-dialog>

  </div>
</template>
<style>
</style>
<script>
  import http from '../api/http'
  import constants from '../commons/constants'
  import {save, read, clear} from '../storage/session'
  import PwdDialog from './sys/account/pwd.vue';
  import LoginDialog from './login.dialog.vue';

  const MENU_LIST = 'MENU_LIST';
  const barMenuList=['DeskTop','Profile'];
  export default{
    data(){
      return {
        projectList:[],
        currentProjectId:this.$utils.getCurrenrProject().id,
        theme:'dark',
        menuSpan: 3,
        leftMenuList: [],
        loginDialogVisible:false,
        menuList: [], user: this.$store.getters.getCurrentLoginInfo.user,
        dialogData: {show: false,showPwd: false}, div_h: (window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight) - 60,
        project:null,
        isCollapse: true
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //折叠导航栏
      collapse:function(){
        this.collapsed=!this.collapsed;
      },
      loadProject(kwd){
        var vm=this;
        http.postData(vm,'/pt/project/listByCurrentUser',{kwd:kwd?kwd:'',limit:10},function(resp){
          var ret = resp.body;
          if (ret.code == '111') {
            //将值传给data
            vm.projectList = ret.value;
          }
        });
      },
      selectProject(id){
        var vm=this;
        if(this.projectList!=undefined&&this.projectList.length>0){
            this.projectList.forEach(function(p){
              if(id==p.id){
                vm.project=p;
              }
            });
        }
        if(vm.project!=null&&vm.project!=undefined){
          //保存当前项目
          this.$utils.setCurrenrProject(vm.project);
          this.$router.go(0);
//          window.location.reload();
        }else{
          //删除当前项目
          this.$utils.clearCurrenrProject();
        }
      },
      /**生成左边菜单*/
      selLeftMenu(index){
        var ml_len = this.menuList.length;
        for (var i = 0; i < ml_len; i++) {
          var menu_ = this.menuList[i];
          if(menu_)
            if (menu_.id == index) {
              this.menuSpan=3;
              this.leftMenuList = menu_.child;
              return;
            }
        }
      },
      handleselect (index) {
        if (index === 'signOut') {
          this.$confirm('确定要退出吗?', '提示', {
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('loginOut').then(() => {
              this.$router.replace({path: '/login'})
              location.reload();
            })
          });
        } else if (index==='theme') {
          this.theme=this.theme=='dark'?'light':'dark';
        } else if (barMenuList.indexOf(index)>=0) {
          this.$router.push({name: index});
        } else if(index=='pwd'){
          this.dialogData.showPwd=true;
        } else {
          this.selLeftMenu(index);
        }
      },
      closeDialog() {
//        this.$set(this.dialogData, 'show', false);
        this.dialogData.show=false;
        this.dialogData.showPwd=false;
      }, getWinHeight(){
        var h = window.innerHeight
          || document.documentElement.clientHeight
          || document.body.clientHeight;
        this.div_h = h - 60;
      }
    },beforeRouteEnter(to, form, next) {
      // 进入首页前先进行登录验证
//      Auth.authorizationCheck().then(response => {
        next();
//      }, response => {  // 登录验证操失败, 转到登录页并带上当前请求路径
//        next('/login?redirect=' + to.path)
//      })
    },
    beforeRouteUpdate(to, from, next) {
      this.getWinHeight();
      next()
    },
    components: {
      PwdDialog,LoginDialog
    },
    created(){//vue创建后执行
      var vm = this;
      http.postData(vm,'/sys/menu/getPower',{},function(resp){
        var ret = resp.body;
        if (ret.code == '111') {
          //将值传给data
          vm.menuList = ret.value;
          vm.$utils.ckMenu(ret.value);
          save(MENU_LIST, JSON.stringify(ret.value));
          vm.leftMenuList = vm.menuList[0].child;
          vm.loadProject();
        } else {
          vm.$store.dispatch('loginOut').then(() => {
            vm.$router.replace({path: '/login'})
            location.reload();
          })
        }
      }, function (e) { //如果获取菜单异常提示
        clear(MENU_LIST);
        this.$confirm('获取菜单异常，是否要重新登录?', '提示', {
          type: 'warning'
        }).then(() => {
          vm.$store.dispatch('loginOut').then(() => {
            vm.$router.replace({path: '/login'})
            location.reload();
          })
        });
      });
      this.getWinHeight();
      window.onresize = function () {
        vm.getWinHeight();
      }
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  body {
    overflow: hidden;
  }

  #PandS .el-menu .el-menu-item {
    float: left;
    width: 150px;

  }
#home .el-menu--dark .el-submenu .el-menu{
  background: #fff;
}
  #home .el-menu--dark .el-menu-item, .el-menu--dark .el-submenu__title{
    color:#565656;

  }
  #home .el-menu--dark .nav_two{
    padding-left:-40px;
    min-width:50px;
    border-radius: 15px;
  }
  . #home .el-menu--dark .nav_two:hover{

  }
  #home .el-menu--dark .el-submenu__title:hover{
    background-color: #f1f1f1;
    color:#78c5a5;
  }
  #home .nav_two:hover .ss{

    color:#78c5a5;
  }
  #home .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active,#home .el-menu-item.is-active{
    color:#565656;
  }
  #home .el-submenu .el-menu-item:hover{
    background-color: #fff;
    box-shadow: 2px 2px 5px #e6e4e5 inset;
    color:#78c5a5;
  }
  #home .left_nav{
    box-shadow:1px 1px 6px #d5d5d5;
    margin-top: 2px;
    background-color:#f6f6f6;
    border-radius: 10px 10px 0 0 ;

  }
  #home .left_dropdown{
    padding-top:25px;
    background-color: #f6f6f6;
  }
.left_dropdown  .el-menu{
  margin:10px 0 0 10%;
  border-radius: 15px;
  width:80%;

  box-shadow: 2px 2px 5px #e6e4e5 inset;

}

  #PandS .el-menu{
    top: 60px;
    width: 450px;
    left: -325px;
  }
  .el-submenu__title .el-icon-arrow-down{
    display:none;
  }
  .menuSliderBar{
    position: absolute;
    border: 1px solid #d1dbe5;
    background:#FFFFFF;
    top:55%;
    z-index:1000;
    color:#aa1111;
    height:20px;
    padding:15px 0px 10px 0px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  }

  .menuSliderBar :hover{
    background-color:#5cb85c;
    color: #ffffff;
  }
  #header{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .top_header{
    box-shadow:0px 3px 7px #d5d5d5;
    z-index: 1000;
    position:relative;
  }
  .headerBox{
    width:100%;
    margin:0 auto;
    height:60px;
  }
  body{
    min-width:1200px;
    overflow-x: auto;
  }

  /*头部导航*/
  .header_navv{

    background-color: #78c5a5;
    margin:0 auto;
    height:40px;
    margin-top: 10px;
    border-radius: 15px;
  }
.header_right{
  height: 100%;
}
  #home .navv_li:hover{


  }
  #home .el-menu--dark .navv_li,.el-menu--dark .navv_li{
    color:#fff;
    height:40px;
    line-height: 40px;
    margin:0 10px;
    width:120px;
    text-align: center;
  }
  #home .el-menu--dark .navv_li:hover{
    color:#78c5a5;
    background: url("../../static/img/backnav.png") no-repeat;
    background-size:100% 110%;
  }
/*搜索框*/
 #home .el-input--small .el-input__inner{
    border-radius: 15px;
   background-color: #79c4a5;
   color:#fff;
   border: none;

  }
  .el-select-dropdown__item.selected.hover{
    background-color: #78c5a5;
  }
  /*搜索悬浮背景色*/
  #header .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,#header .el-select-dropdown__item.hover,#header .el-select-dropdown__item:hover{
    background-color: #78c5a5;
  }
/*主页点击*/
  #home .el-menu--dark .homeclick:hover{
    background-color: #fff;

  }
  #home .el-menu--dark .homeclick{
    border:none;
    padding: 0 0 0 20px;
  }
/*登录悬浮*/
#home .el-menu--dark .administrators .el-submenu__title:hover{
    border-bottom: 5px solid #78c5a5;
    background-color: #fff;
  }

  #home .el-menu--dark .administrators .el-menu:hover{
    border-bottom: 5px solid #78c5a5;
    background-color: #fff;
  }
  .el-menu--horizontal>.el-menu-item:hover, .el-menu--horizontal>.el-submenu.is-active .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title{
    border-bottom: 5px solid transparent;
  }


  .el-menu--horizontal .el-submenu .el-submenu__icon-arrow{
    color:#77c4a4;
  }


/*按钮颜色*/
  .el-button--primary{
    background-color: #78c5a5;
    border:none;
    border-radius: 5px ;
  }
  .el-button--primary:hover{
    background-color: #78c5a5;
    color:#fff;
  }
  .el-pager li.active{
    background-color: #78c5a5;
    border-color: #78c5a5;
    color:#fff;
  }
  .el-pager li.active:hover{
    border:none;
    background-color: #78c5a5;
    color:#fff;
  }
  .el-pager li:hover{
    border-color: #78c5a5;
    color:#78c5a5;
  }
  .el-button--default:hover{

    border-color: #78c5a5;
    color:#78c5a5;
  }
.el-message-box__btns .el-button--primary:hover{
  color:#fff;
}
  .el-message-box__btns .el-button--primary{
    background-color: #78c5a5;
    color:#fff;
  }
.el-button{
    border-radius: 5px;
  }
#home .el-button--text{
  color:#78c5a5;
}
/*清除按钮*/
  .el-button--danger{
    color: #fff;
    background-color: #78c5a5;
    border-color: #78c5a5;
  }
  .el-button--danger:focus, .el-button--danger:hover{
    background-color: #78c5a5;
    border-color: #78c5a5;
  }
/**/
  #routerDiv{
    padding:20px;
    box-shadow: 2px 2px 7px #e3e3e3 inset;
  }
  #routerDiv .aui-icon-left{
    display: none;
  }
/*input*/
  .el-input__inner{
    border:1px solid #78c5a5;
    border-radius: 5px;
  }
  .el-select .el-input__inner:focus{
    border:1px solid #78c5a5;
  }
  .el-breadcrumb__item__inner:hover{
    color:#48576a;
  }
/*单选框按钮*/
  .el-radio__input.is-checked .el-radio__inner{
    border-color: #78c5a5;
    background: #78c5a5;
  }
  .el-radio__inner:hover{
    border-color: #78c5a5;
  }

  #home :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
    font-size: 10px;
  }

  #home ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
    font-size: 10px;
  }

  #home input:-ms-input-placeholder{
    color: #fff;
    font-size: 10px;
  }

  #home input::-webkit-input-placeholder{
    color: #fff;
    font-size: 10px;
  }


  /*footer*/
  .footer_nav{
    color: #78c5a5;
    background-color:#f1f1f1;
    box-shadow: 0px -1px 6px #d5d5d5;
    padding:8px;
    font-size: 12px;
  }
  .footer_a{
    text-align: center;
    color: #78c5a5;
    margin-bottom: 8px;
  }
  .footer_a a{
    margin:0 10px;
    color: #78c5a5;
    font-size: 13px;
  }
  #app .footer_a a:hover{
    text-decoration: underline;
  }

  .isSearch{
    position: absolute;
    right:8px;
    color: #fff;
    bottom:5px;
    color:#fff;
    z-index: 500;
  }
  .ss{
    margin-right: 3px;
    vertical-align: baseline;
    color:#696969;
  }

    /*复选框*/
  .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #78c5a5;
    border-color: #78c5a5;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #78c5a5;
  }
</style>
